<template>
	<div ref="axis" class="axis-chart"></div>
</template>

<script>
	import * as echarts from 'echarts'
	import chartMixin from '@/mixins/chartMixin'
	export default {
		name: 'AxisChart',
		mixins: [chartMixin],
		methods: {
			initChart() {
				this.chart = echarts.init(this.$refs.axis)
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
						},
					},
					color: ['#21B795'],
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true,
					},
					xAxis: [
						{
							type: 'category',
							data: this.chartData[0],
							axisTick: {
								alignWithLabel: true,
							},
						},
					],
					yAxis: [
						{
							type: 'value',
						},
					],
					series: [
						{
							name: 'Direct',
							type: 'bar',
							barWidth: '20',
							itemStyle: {
								borderRadius: [5, 5, 0, 0],
							},
							data: this.chartData[1],
						},
					],
				}
				option && this.chart.setOption(option)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.axis-chart {
		width: 100%;
		height: 100%;
	}
</style>
